<script lang="ts" setup>
import { ref, onMounted, computed, watch, nextTick } from 'vue'
import { ElMessage, ElMessageBox, FormInstance, FormRules } from 'element-plus'
import jyglService from '@/api/jygl'
import zzjgService from '@/api/zzjg'
import { getFldm } from '@/utils/get-fldm'
import TreeUtilDTO from '@/utils/tree'
import pinyin from 'pinyin-match'
import { useMainStore } from '@/store/main'

const emit = defineEmits(['refresh'])

const mainStore = useMainStore()
const isLoading = ref()
const formRef = ref()
const dalyTreeRef = ref()
// 生命周期
const sjdwList = ref()
const activeName = ref('ssda')

onMounted(() => {
  // 借阅方式分类代码
  getJyfs()
  // 借阅目的分类代码
  getJymd()
  // 借阅类型分类代码
  getJylx()
})

// 借阅方式分类代码
const jyfsList = ref()
const getJyfs = async () => {
  jyfsList.value = await getFldm('gd043')
  // form.value.jyfsdm = jyfsList.value[0].dm
  // form.value.jyfsmc = jyfsList.value[0].mc
}
// 借阅目的分类代码
const jymdList = ref()
const getJymd = async () => {
  jymdList.value = await getFldm('gd044')
}
// 借阅类型分类代码
const jylxList = ref()
const getJylx = async () => {
  jylxList.value = await getFldm('gd048')
}

/*
 * 提交申请（包含修改、续借）
 */
// 保存借阅申请入参
const form = ref<any>({
  jysqbh: '', // 借阅申请数据编号(新增不传)
  bmsah: '', // 部门受案号
  jyrdwbm: mainStore.userInfo.dwbm, // 借阅单位编码
  jyrdwmc: mainStore.userInfo.dwmc, // 借阅单位名称
  sjdwbm: '', // 数据所属单位编码
  sjdwmc: '', // 数据所属单位名称
  jyrbmbm: mainStore.userInfo.bmbm, // 借阅人部门编码
  jyrbmmc: mainStore.userInfo.bmmc, // 借阅人部门名称
  jyrbh: mainStore.userInfo.ryid, // 借阅人编号
  jyrxm: mainStore.userInfo.xm, // 借阅人姓名
  jyfsdm: '', // 借阅方式代码
  jyfsmc: '', // 借阅方式名称
  jyts: '14', // 借阅天数
  syfsdm: [], // 使用方式代码
  syfsmc: [], // 使用方式名称(打印,下载，查看)
  jymddm: '', // 借阅目的代码
  jymdmc: '', // 借阅目的名称
  jylxdm: '', // 借阅类型代码
  jylxmc: '', // 借阅类型名称
  cxdanr: '', // 查询档案内容
  jymx: '', // 借阅明细
  sfky: 'N', // 是否跨院不能为空
  qtjymd: '',
  jyrdh: mainStore.userInfo.dhhm,
  jyryx: mainStore.userInfo.dzyx,
  sqrq: new Date(), //申请日期
})

const rules = ref<FormRules>({
  sjdwmc: [
    {
      required: true,
      message: '请选择',
      trigger: 'submit',
    },
  ],
  syfsdm: [
    {
      required: true,
      message: '请选择',
      trigger: 'submit',
    },
  ],
  jymdmc: [
    {
      required: true,
      message: '请选择',
      trigger: 'change',
    },
  ],
  cxdanr: [
    {
      required: true,
      message: '请输入',
      trigger: 'blur',
    },
  ],
  jyts: [
    {
      required: true,
      message: '请选择',
      trigger: 'change',
    },
  ],
  jylxdm: [
    {
      required: true,
      message: '请选择',
      trigger: 'blur',
    },
  ],
  jyfsmc: [
    {
      required: true,
      message: '请选择',
      trigger: 'change',
    },
  ],
  qtjymd: [
    {
      required: true,
      message: '请输入',
      trigger: 'blur',
    },
  ],
})

// 修改-》提交
const submit = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  form.value.syfsdm = checkbox1.value.map((item) => (item ? '1' : '0')).join(',')
  let newArr: any = []
  checkbox1.value?.forEach((item, index) => {
    if (item) {
      if (index === 0) {
        newArr.push('查看')
      }
      if (index === 1) {
        newArr.push('下载')
      }
      if (index === 2) {
        newArr.push('打印')
      }
    }
    return null
  })
  form.value.syfsmc = newArr.join('+')
  formEl.validate((valid, fields) => {
    if (valid) {
      let paramsList: any = null
      delete form.value.jydalxList
      if (isShowTabs.value === 'ssShow') {
        const list: any[] = []

        ssdaList.value.forEach((ssda: any) => {
          list.push({
            ajbh: ssda.ajbh,
            dabh: ssda.dabh,
            dwbm: ssda.cbdwbm,
            dwmc: ssda.cbdwmc,
            bmbm: ssda.bmbm,
            bmmc: ssda.bmmc,
            jydalxdm: 'gd0420001',
            jydalxmc: '诉讼档案',
            jysjbh: ssda.ajbh,
            jysjlxdm: 'gd0410001',
            jysjlxmc: '案件',
            sjbh: ssda.ajbh,
            jysqbh: form.value.jysqbh,
          })
          TreeUtilDTO.flatten(ssda.treeData).forEach((item) => {
            list.push({
              ajbh: ssda.ajbh,
              dabh: ssda.dabh,
              dwbm: ssda.cbdwbm,
              dwmc: ssda.cbdwmc,
              bmbm: ssda.bmbm,
              bmmc: ssda.bmmc,
              jydalxdm: 'gd0420001',
              jydalxmc: '诉讼档案',
              jysjbh: item.bh,
              jysjlxdm: item.cj === '1' ? 'gd0410003' : item.cj === '2' ? 'gd0410002' : '',
              jysjlxmc: item.cj === '1' ? '文书案卷' : item.cj === '2' ? '文书目录' : '',
              sjbh: item.bh,
              jysqbh: form.value.jysqbh,
            })
          })
        })
        paramsList = {
          ...form.value,
          jyrbh: mainStore.userInfo.ryid,
          jysjList: list,
          jysqbh: form.value.jysqbh,
        }
      } else if (isShowTabs.value === 'spShow') {
        paramsList = {
          ...form.value,
          jyrbh: mainStore.userInfo.ryid,
          jysqbh: form.value.jysqbh,
          jysjList: spdaList.value?.map((el: any) => {
            return {
              ajbh: el.ajbh,
              dabh: el.dabh,
              bmsah: el.bmsah,
              dwbm: el.ljdwbm,
              dwmc: el.ljdw,
              bmbm: el.bmbm,
              bmmc: el.bmmc,
              jydalxdm: 'gd0420002',
              jydalxmc: '视频档案',
              jysjbh: el.mlbh,
              jysjlxdm: 'gd0410004',
              jysjlxmc: '视频',
              sjbh: el.mlbh,
              jysqbh: form.value.jysqbh,
              // sjdwbm: el.dwbm,
              // sjdwmc: el.ljdw,
            }
          }),
        }
      } else {
        const list: any[] = []
        ssdaList.value.forEach((ssda: any) => {
          list.push({
            ajbh: ssda.ajbh,
            dabh: ssda.dabh,
            dwbm: ssda.cbdwbm,
            dwmc: ssda.cbdwmc,
            bmbm: ssda.bmbm,
            bmmc: ssda.bmmc,
            jydalxdm: 'gd0420001',
            jydalxmc: '诉讼档案',
            jysjbh: ssda.ajbh,
            jysjlxdm: 'gd0410001',
            jysjlxmc: '案件',
            sjbh: ssda.ajbh,
            jysqbh: form.value.jysqbh,
          })
          TreeUtilDTO.flatten(ssda.treeData).forEach((item) => {
            list.push({
              ajbh: ssda.ajbh,
              dabh: ssda.dabh,
              dwbm: ssda.cbdwbm,
              dwmc: ssda.cbdwmc,
              bmbm: ssda.bmbm,
              bmmc: ssda.bmmc,
              jydalxdm: 'gd0420001',
              jydalxmc: '诉讼档案',
              jysjbh: item.bh,
              jysjlxdm: item.cj === '1' ? 'gd0410003' : item.cj === '2' ? 'gd0410002' : '',
              jysjlxmc: item.cj === '1' ? '文书案卷' : item.cj === '2' ? '文书目录' : '',
              sjbh: item.bh,
              jysqbh: form.value.jysqbh,
            })
          })
        })
        const spList = spdaList.value.map((el: any) => {
          return {
            ajbh: el.ajbh,
            dabh: el.dabh,
            bmsah: el.bmsah,
            dwbm: el.ljdwbm,
            dwmc: el.ljdw,
            bmbm: el.bmbm,
            bmmc: el.bmmc,
            jydalxdm: 'gd0420002',
            jydalxmc: '视频档案',
            jysjbh: el.mlbh,
            jysjlxdm: 'gd0410004',
            jysjlxmc: '视频',
            sjbh: el.mlbh,
            jysqbh: form.value.jysqbh,
            // sjdwbm: el.dwbm,
            // sjdwmc: el.ljdw,
          }
        })
        paramsList = {
          ...form.value,
          jyrbh: mainStore.userInfo.ryid,
          jysqbh: form.value.jysqbh,
          jysjList: [...list, ...spList],
        }
      }

      const params = paramsList
      jyglService
        .saveJysq(params)
        .then((res) => {
          if (res.data.czjg) {
            ElMessage.success('提交成功')
            emit('refresh')
            dialogVisible.value = false
          }
        })
        .catch((err) => {
          !err.isError && ElMessage({ type: 'warning', message: err.message })
        })
    } else {
      console.log('error submit!', fields)
    }
  })
}

// 续借 -》 提交
const xjSubmit = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  form.value.syfsdm = checkbox1.value.map((item) => (item ? '1' : '0')).join(',')
  let newArr: any = []
  checkbox1.value?.forEach((item, index) => {
    if (item) {
      if (index === 0) {
        newArr.push('查看')
      }
      if (index === 1) {
        newArr.push('下载')
      }
      if (index === 2) {
        newArr.push('打印')
      }
    }
    return null
  })
  form.value.syfsmc = newArr.join('+')
  formEl.validate((valid, fields) => {
    if (valid) {
      let paramsList: any = null
      delete form.value.jydalxList
      if (isShowTabs.value === 'ssShow') {
        const list: any[] = []
        ssdaList.value.forEach((ssda: any) => {
          list.push({
            ajbh: ssda.ajbh,
            dabh: ssda.dabh,
            dwbm: ssda.ljdwbm,
            dwmc: ssda.ljdw,
            bmbm: ssda.bmbm,
            bmmc: ssda.bmmc,
            jydalxdm: 'gd0420001',
            jydalxmc: '诉讼档案',
            jysjbh: ssda.ajbh,
            jysjlxdm: 'gd0410001',
            jysjlxmc: '案件',
            sjbh: ssda.ajbh,
          })
          TreeUtilDTO.flatten(ssda.treeData).forEach((item) => {
            list.push({
              ajbh: ssda.ajbh,
              dabh: ssda.dabh,
              dwbm: ssda.ljdwbm,
              dwmc: ssda.ljdw,
              bmbm: ssda.bmbm,
              bmmc: ssda.bmmc,
              jydalxdm: 'gd0420001',
              jydalxmc: '诉讼档案',
              jysjbh: item.bh,
              jysjlxdm: item.cj === '1' ? 'gd0410003' : item.cj === '2' ? 'gd0410002' : '',
              jysjlxmc: item.cj === '1' ? '文书案卷' : item.cj === '2' ? '文书目录' : '',
              sjbh: item.bh,
            })
          })
        })
        paramsList = {
          ...form.value,
          jyrbh: mainStore.userInfo.ryid,
          jysjList: list,
          jysqbh: '',
        }
      } else if (isShowTabs.value === 'spShow') {
        paramsList = {
          ...form.value,
          jyrbh: mainStore.userInfo.ryid,
          jysqbh: '',
          jysjList: spdaList.value?.map((el: any) => {
            return {
              ajbh: el.ajbh,
              dabh: el.dabh,
              bmsah: el.bmsah,
              dwbm: el.ljdwbm,
              dwmc: el.ljdw,
              bmbm: el.bmbm,
              bmmc: el.bmmc,
              jydalxdm: 'gd0420002',
              jydalxmc: '视频档案',
              jysjbh: el.mlbh,
              jysjlxdm: 'gd0410004',
              jysjlxmc: '视频',
              sjbh: el.mlbh,
              // sjdwbm: el.dwbm,
              // sjdwmc: el.ljdw,
            }
          }),
        }
      } else {
        const list: any[] = []
        ssdaList.value.forEach((ssda: any) => {
          list.push({
            ajbh: ssda.ajbh,
            dabh: ssda.dabh,
            dwbm: ssda.ljdwbm,
            dwmc: ssda.ljdw,
            bmbm: ssda.bmbm,
            bmmc: ssda.bmmc,
            jydalxdm: 'gd0420001',
            jydalxmc: '诉讼档案',
            jysjbh: ssda.ajbh,
            jysjlxdm: 'gd0410001',
            jysjlxmc: '案件',
            sjbh: ssda.ajbh,
          })
          TreeUtilDTO.flatten(ssda.treeData).forEach((item) => {
            list.push({
              ajbh: ssda.ajbh,
              dabh: ssda.dabh,
              dwbm: ssda.ljdwbm,
              dwmc: ssda.ljdw,
              bmbm: ssda.bmbm,
              bmmc: ssda.bmmc,
              jydalxdm: 'gd0420001',
              jydalxmc: '诉讼档案',
              jysjbh: item.bh,
              jysjlxdm: item.cj === '1' ? 'gd0410003' : item.cj === '2' ? 'gd0410002' : '',
              jysjlxmc: item.cj === '1' ? '文书案卷' : item.cj === '2' ? '文书目录' : '',
              sjbh: item.bh,
            })
          })
        })

        const spList = spdaList.value.map((el: any) => {
          return {
            ajbh: el.ajbh,
            dabh: el.dabh,
            bmsah: el.bmsah,
            dwbm: el.ljdwbm,
            dwmc: el.ljdw,
            bmbm: el.bmbm,
            bmmc: el.bmmc,
            jydalxdm: 'gd0420002',
            jydalxmc: '视频档案',
            jysjbh: el.mlbh,
            jysjlxdm: 'gd0410004',
            jysjlxmc: '视频',
            sjbh: el.mlbh,
            // jysqbh: '',
            // sjdwbm: el.dwbm,
            // sjdwmc: el.ljdw,
          }
        })
        paramsList = {
          ...form.value,
          jyrbh: mainStore.userInfo.ryid,
          jysqbh: '',
          jysjList: [...list, ...spList],
        }
      }

      const params = paramsList
      jyglService
        .saveJysq(params)
        .then((res) => {
          if (res.data.czjg) {
            ElMessage.success('提交成功')
            emit('refresh')
            dialogVisible.value = false
          }
        })
        .catch((err) => {
          !err.isError && ElMessage({ type: 'warning', message: err.message })
        })
    } else {
      console.log('error submit!', fields)
    }
  })
}

/*
 * 移除目录
 */
const ycml = () => {
  ElMessageBox.confirm('确定删除选中数据?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    if (isShowTabs.value === 'ssShow') {
      ssdaList.value = ssdaList.value.filter((item: any) => !multipleSelection.value.includes(item))
      if (checkNodes.value.length) {
        const tempList = TreeUtilDTO.flatten(currentRow.value.treeData)
        const newList = tempList
          .map((el) => ({
            ...el,
            children: [],
          }))
          .filter((item) => !checkNodes.value.find((it) => it.bh === item.bh))
        currentRow.value.treeData = TreeUtilDTO.getTreeData(newList, 'bh', 'fbh')
      }
    } else if (isShowTabs.value === 'spShow') {
      let val: any = multipleSelection.value
      if (val) {
        for (let i = 0; i < val.length; i++) {
          spdaList.value = spdaList.value.filter((el: any) => el.ajbh !== val[i]?.ajbh)
        }
      }
    } else {
      ssdaList.value = ssdaList.value.filter((item: any) => !multipleSelection.value.includes(item))
      if (checkNodes.value.length) {
        const tempList = TreeUtilDTO.flatten(currentRow.value.treeData)
        const newList = tempList
          .map((el) => ({
            ...el,
            children: [],
          }))
          .filter((item) => !checkNodes.value.find((it) => it.bh === item.bh))
        currentRow.value.treeData = TreeUtilDTO.getTreeData(newList, 'bh', 'fbh')
      }
      let val: any = ssMultipleSelection.value
      if (val) {
        for (let i = 0; i < val.length; i++) {
          spdaList.value = spdaList.value.filter((el: any) => el.ajbh !== val[i]?.ajbh)
        }
      }
    }

    ElMessage.success('删除成功')
  })
}

/*
 * 打开弹窗
 */
//
const dialogTitle = ref()
const spTableData = ref()
const titleText = ref<string>('')
const dialogVisible = ref(false)
const checkSelection = ref<any[]>([])
const openDialog = (title: string, tabTitle: string, selectRow: any) => {
  checkSelection.value = [selectRow]
  titleText.value = title
  if (title === 'edit') {
    dialogTitle.value = '修改借阅申请'
  } else {
    dialogTitle.value = '新增借阅申请'
  }
  getZzjgQuertData()
  getJysqxq(selectRow, true)
  dialogVisible.value = true
}

const getZzjgQuertData = () => {
  zzjgService.queryAllOrg({}).then((res: any) => {
    sjdwList.value = TreeUtilDTO.getTreeData(res.data || [], 'dwbm', 'fdwbm')
  })
}

/*
 * 查看借阅单下的诉讼档案
 */
const ssdaList = ref<any[]>([])
const cajwsmlsjList = ref<any[]>([])
const querySsdaList = (row: any) => {
  const params = { jysqbh: row[0].jysqbh }
  jyglService
    .queryJysqajxxlb(params)
    .then((res) => {
      ssdaList.value = res.data
      if (ssdaList.value.length) {
        ssdaList.value.forEach((item: any) => {
          const params = {
            ajbh: item.ajbh,
            jysqbh: checkSelection.value[0].jysqbh as string,
            mlxslx: '0',
          }
          jyglService
            .queryJyqsajmlList(params)
            .then((res) => {
              item.treeData = TreeUtilDTO.getTreeData(res.data, 'bh', 'fbh')
              //   if (res.data.length === 0) {
              //     cajwsmlsjList.value.push({
              //       wsajbh: item.ajbh,
              //       bh: item.ajbh,
              //     })
              //   } else {
              //     cajwsmlsjList.value.push(
              //       ...res.data.map((el) => {
              //         return { ...el, wsajbh: item.ajbh }
              //       }),
              //     )
              //     cajwsmlsjList.value.push({
              //       ...item,
              //       wsajbh: item.ajbh,
              //       bh: item.ajbh,
              //       dwbm: item.cbdwbm,
              //       dwmc: item.cbdwmc,
              //     })
              //   }
            })
            .catch((err) => {
              !err.isError && ElMessage({ type: 'warning', message: err.message })
            })
        })
      }
    })
    .catch((err) => {
      !err.isError && ElMessage({ type: 'warning', message: err.message })
    })
}

/*
 * 查看借阅单下的视频档案
 */
const spdaList = ref<any[]>([])
const querySpdaList = (row: any) => {
  const params = { jysqbh: row[0].jysqbh }
  jyglService
    .queryJysqspdalb(params)
    .then((res) => {
      spdaList.value = res.data
    })
    .catch((err) => {
      !err.isError && ElMessage({ type: 'warning', message: err.message })
    })
}

// 打开弹窗获取详情
const getJysqxq = (item: any, boo: boolean) => {
  const params = { jysqbh: item.jysqbh }
  jyglService
    .getJysqxq(params)
    .then((res) => {
      if (boo) {
        form.value = res.data
        checkbox1.value = res.data.syfsdm.split(',').map((item: any) => {
          return item === '1' ? true : false
        })
      } else {
        form.value.sjdwmc = res.data.sjdwmc
        form.value.sjdwbm = res.data.sjdwbm
      }
      if (form.value.jylxdm === 'gd0480001') {
        querySsdaList(checkSelection.value)
        querySpdaList(checkSelection.value)
      } else {
        spdaList.value = []
        ssdaList.value = []
        // form.value.sjdwmc = ''
        // form.value.sjdwbm = ''
      }
    })
    .catch((err) => {
      !err.isError && ElMessage({ type: 'warning', message: err.message })
    })
}

/*
 * 关闭弹框
 */
const closeDialog = () => {
  cajwsmlsjList.value = []
  expandRowKeys.value = []
  // Object.keys(form.value).forEach((el: any) => {
  //   form.value[el] = ''
  // })
  form.value.jyrdh = ''
  form.value.syfsdm = []
  form.value.syfsmc = []
  form.value.jyfsmc = ''
  form.value.jyfsdm = ''
  checkbox1.value = [false, false, false]
  nextTick(() => {
    formRef.value?.resetFields()
  })
  dialogVisible.value = false
}

const rightSmall = ref<boolean>(false)
// 是否按下
const dragFlag = ref<boolean>(false)
const dragstart = () => {
  dragFlag.value = true
}

const moveLenHeight = ref<number>(0)
const dragRight = (e: any) => {
  if (!dragFlag.value || !e.clientY) {
    return
  }
  if (e.clientY && window.innerHeight - e.clientY - 26 <= 200) {
    moveLenHeight.value = 200
  } else if (e.clientY && window.innerHeight - e.clientY - 26 >= 400) {
    moveLenHeight.value = 400
  } else {
    moveLenHeight.value = window.innerHeight - e.clientY - 26
  }
}

const dragend = () => {
  dragFlag.value = false
}

const multipleSelection = ref<any[]>([])
// 诉讼档案表格复选框
const handleSelectionChange = (row: any) => {
  multipleSelection.value = row
}

const ssMultipleSelection = ref([])
// 视频档案
const spHandleSelectionChange = (row: any) => {
  ssMultipleSelection.value = row
}

// 借阅方式代码
const jyfsChange = (index: number) => {
  form.value.jyfsmc = jyfsList.value[index].mc
  form.value.jyfsdm = jyfsList.value[index].dm
  checkbox1.value = [false, false, false]
}
// 借阅类型代码
const jylxChange = (val: any) => {
  let obj: any = {}
  obj = jylxList.value.find((item: any) => {
    return item.dm === val //筛选出匹配数据，这里的value是你遍历数组每一项的value，如果没有对后台返回的数据做处理，一般为id
  })
  form.value.jylxmc = obj.mc
  form.value.jylxdm = obj.dm

  if (val === 'gd0480002') {
    ssdaList.value = []
    spdaList.value = []
    form.value.sjdwbm = ''
    form.value.sjdwmc = ''
  } else {
    getJysqxq(checkSelection.value, true)
    querySsdaList(checkSelection.value)
    querySpdaList(checkSelection.value)
    getZzjgQuertData()
    form.value.sjdwbm = ''
    form.value.sjdwmc = ''
    // tableData.value = restoreData.value
    // spTableData.value = restoreSpData.value
    // form.value.sjdwbm = tableData.value[0]?.ljdwbm
    //   ? tableData.value[0]?.ljdwbm
    //   : tableData.value[0]?.dwbm
    // form.value.sjdwmc = tableData.value[0]?.ljdw
  }
}

// 借阅目的
const jymdChange = (index: number) => {
  form.value.jymdmc = jymdList.value[index].mc
  form.value.jymddm = jymdList.value[index].dm
}

// const checkNodes = ref<any[]>([])
const checkbox1 = ref([false, false, false])
// const check = (data: any, checks: any) => {
//   checkNodes.value = [...checks.checkedNodes, ...checks.halfCheckedNodes]
//   debugger
// }
const treeSelectRef = ref()
// checkout
const nodeChange = (data: any) => {
  form.value.sjdwbm = data.dwbm
  form.value.sjdwmc = data.dwmc
}

/*
 * 查询借阅车诉讼档案
 */

/*
 * 查询借阅车视频档案
 */
const queryJycspsjlb = () => {
  jyglService
    .queryJycspsjlb()
    .then((res) => {
      spTableData.value = res.data
    })
    .catch((err) => {
      !err.isError && ElMessage({ type: 'warning', message: err.message })
    })
}

const expandRowKeys = ref<any>([])
const expandedRowData = ref<any>()
const rowListData = ref<any[]>([])
const expandChange = (expandedRows: { ajbh: string }, rowList: any) => {
  expandedRowData.value = expandedRows
  rowListData.value = rowList
  if (rowList.length) {
    expandRowKeys.value = rowList.map((item: any) => item.jysjbh)
  } else {
    expandRowKeys.value = []
  }
  // queryJyqsajmlList(expandedRows, rowList)
}

/*
 * 查询借阅车诉讼目录
 */
const queryJyqsajmlList = (expandedRows: any, rowList: any) => {
  const list = rowList.find((item: any) => item.ajbh === expandedRows.ajbh)
  if (list) {
    const params = {
      ajbh: expandedRows.ajbh as string,
      jysqbh: checkSelection.value[0].jysqbh as string,
      mlxslx: '0',
    }
    jyglService
      .queryJyqsajmlList(params)
      .then((res) => {
        expandedRows.treeData = TreeUtilDTO.getTreeData(res.data, 'bh', 'fbh')
      })
      .catch((err) => {
        !err.isError && ElMessage({ type: 'warning', message: err.message })
      })
  }
}

const isShowTabs = ref()
watch(
  () => [ssdaList.value, spdaList.value],
  (val) => {
    if (ssdaList.value.length > 0 && spdaList.value.length > 0) {
      isShowTabs.value = 'ssspShow'
    } else if (ssdaList.value.length > 0 && !spdaList.value.length) {
      isShowTabs.value = 'ssShow'
    } else if (!ssdaList.value.length && spdaList.value.length > 0) {
      isShowTabs.value = 'spShow'
    }
  },
)

const filterFn = (value: string, data: any, node: any) => {
  if (value) return pinyin.match(node.label, value)
  return true
}

const checkNodes = ref<any[]>([])
const currentRow = ref<any>()
//  选择复选框
const checkTree = (checks: any, row: any) => {
  checkNodes.value = checks.checkedNodes
  currentRow.value = row
}

watch(
  () => checkbox1,
  (val) => {
    if (checkbox1.value[1] || checkbox1.value[2]) {
      checkbox1.value[0] = true
    }
  },
  {
    deep: true,
  },
)

const syfsDisabled = computed(() => {
  if (form.value.jyfsdm === 'gd0430001') {
    return false
  } else {
    return true
  }
})

defineExpose({ openDialog })
</script>
<template>
  <el-dialog
    v-model="dialogVisible"
    :title="dialogTitle"
    width="80%"
    :close-on-click-modal="false"
    @closed="closeDialog"
  >
    <div class="dialog-box" :class="ssdaList.length || spdaList.length ? 'dialog-height' : ''">
      <el-form ref="formRef" label-width="110px" :model="form" :rules="rules">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="借阅单编号">
              <el-input v-model="form.jydbh" placeholder="请输入" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="申请日期" style="width: 100%">
              <el-date-picker
                style="width: 100%"
                v-model="form.sqrq"
                type="date"
                placeholder="请选择"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
                disabled
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="借阅单位">
              <el-input v-model="form.jyrdwmc" disabled placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="借阅人">
              <el-input v-model="form.jyrxm" disabled placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="借阅人部门" disabled style="width: 100%">
              <el-input v-model="form.jyrbmmc" disabled placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="借阅人电话" style="width: 100%">
              <el-input v-model="form.jyrdh" disabled placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="借阅人邮箱" style="width: 100%">
              <el-input v-model="form.jyryx" placeholder="请输入" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="借阅方式" prop="jyfsmc" style="width: 100%">
              <el-select
                v-model="form.jyfsmc"
                clearable
                placeholder="请选择"
                style="width: 100%"
                @change="jyfsChange"
              >
                <el-option
                  v-for="(zrritem, index) in jyfsList"
                  :key="zrritem.dm"
                  :label="zrritem.mc"
                  :value="index"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="借阅天数" prop="jyts">
              <el-select v-model="form.jyts" clearable placeholder="请选择" style="width: 100%">
                <el-option label="14" value="14"> </el-option>
                <el-option label="30" value="30"> </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="档案所属院" prop="sjdwmc" style="width: 100%">
              <el-tree-select
                ref="treeSelectRef"
                style="width: 300px"
                v-model="form.sjdwmc"
                :props="{
                  children: 'children',
                  label: 'dwmc',
                  value: 'dwbm',
                }"
                :data="sjdwList"
                check-strictly
                default-expand-all
                :filter-node-method="filterFn"
                filterable
                @node-click="nodeChange"
                disabled
              >
              </el-tree-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="使用方式" :prop="form.jyfsdm === 'gd0430001' ? 'syfsdm' : ''">
              <el-checkbox
                v-model="checkbox1[0]"
                label="查看"
                :disabled="syfsDisabled"
              ></el-checkbox>
              <el-checkbox
                v-model="checkbox1[1]"
                label="下载"
                :disabled="syfsDisabled"
              ></el-checkbox>
              <el-checkbox
                v-model="checkbox1[2]"
                label="打印"
                :disabled="syfsDisabled"
              ></el-checkbox>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="借阅类型" prop="jylxdm">
              <el-radio-group v-model="form.jylxdm" @change="jylxChange" disabled>
                <el-radio v-for="zrritem in jylxList" :key="zrritem.dm" :value="zrritem.dm">{{
                  zrritem.mc
                }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="借阅目的" prop="jymdmc" style="width: 100%">
              <el-select
                v-model="form.jymdmc"
                clearable
                placeholder="请选择"
                style="width: 100%"
                @change="jymdChange"
              >
                <el-option
                  v-for="(zrritem, index) in jymdList"
                  :key="zrritem.dm"
                  :label="zrritem.mc"
                  :value="index"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              v-if="form.jymddm === 'gd0440011'"
              label="其他借阅目的"
              prop="qtjymd"
              style="width: 100%"
            >
              <el-input v-model="form.qtjymd" placeholder="请输入" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="16">
            <el-form-item
              label="查档内容"
              style="width: 100%"
              :prop="ssdaList.length || spdaList.length ? '' : 'cxdanr'"
            >
              <el-input
                type="textarea"
                :row="5"
                maxlength="500"
                v-model="form.cxdanr"
                placeholder="请输入"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <!--拖动div-->
      <div
        class="table-drag-box"
        v-if="ssdaList.length || spdaList.length"
        :draggable="true"
        title="可上下拖动"
        @dragstart="dragstart()"
        @dragend="dragend()"
        @drag="dragRight($event)"
      >
        <div class="dragImg">
          <el-icon class="dargIcon" color="#bdcae2"><MoreFilled /></el-icon>
        </div>
      </div>

      <div
        class="right-bottom"
        :class="{ small: rightSmall }"
        :style="{ height: moveLenHeight ? `${moveLenHeight}px` : '' }"
        v-if="ssdaList.length || spdaList.length"
      >
        <div class="right-img" @click="rightSmall = !rightSmall">
          <img src="@/assets/images/zsq.png" alt="" v-if="!rightSmall" />
          <img src="@/assets/images/ysq.png" alt="" v-else-if="rightSmall" />
        </div>
        <div class="content-tabs" v-if="ssdaList.length || spdaList.length">
          <!--  @tab-change="changeTabs" -->
          <!-- 诉讼档案 -->
          <el-tabs class="td-tabs" v-if="isShowTabs === 'ssShow' || isShowTabs === 'spShow'">
            <el-tab-pane :label="isShowTabs === 'ssShow' ? '诉讼档案' : '视频档案'" lazy>
              <el-table
                ref="multipleTableRef"
                height="100%"
                :data="isShowTabs === 'ssShow' ? ssdaList : spdaList"
                highlight-current-row
                row-key="jysjbh"
                @expand-change="expandChange"
                :expand-row-keys="expandRowKeys"
                @selection-change="handleSelectionChange"
              >
                <!-- <el-table-column type="selection" width="55" /> -->
                <template v-if="isShowTabs === 'ssShow'">
                  <el-table-column type="expand">
                    <template #default="props">
                      <el-tree
                        style="margin-left: 45px"
                        ref="dalyTreeRef"
                        :data="props.row.treeData"
                        :check-strictly="false"
                        :props="{ label: 'mc', children: 'children' }"
                        node-key="jysjbh"
                        highlight-current
                        :show-checkbox="false"
                        @check="(_:any, checks: any)=>checkTree(checks, props.row)"
                      >
                        <template #default="{ data }">
                          <span class="custom-tree-node">
                            <span>{{ data.mc }} ({{ data.sl || data.wjsl }})</span>
                          </span>
                        </template>
                      </el-tree>
                    </template>
                  </el-table-column>
                  <el-table-column prop="ajdh" label="档号" show-overflow-tooltip />
                  <el-table-column prop="ajmc" label="案件名称" show-overflow-tooltip />
                  <el-table-column prop="bmsah" label="部门受案号" show-overflow-tooltip />
                  <el-table-column prop="dsr" label="当事人" />
                  <el-table-column prop="ay" label="案由" />
                  <el-table-column prop="jcg" label="检察官" />
                </template>
                <template v-else>
                  <el-table-column prop="dh" label="档号" />
                  <el-table-column prop="tm" label="题名" />
                  <el-table-column prop="splx" label="视频类型" />
                  <el-table-column prop="lzz" label="录制者" />
                  <el-table-column prop="lzrq" label="录制日期" />
                </template>
              </el-table>
            </el-tab-pane>
          </el-tabs>

          <el-tabs class="td-tabs" v-else v-model="activeName">
            <el-tab-pane
              label="&nbsp;&nbsp;&nbsp;&nbsp;诉讼档案&nbsp;&nbsp;&nbsp;&nbsp;"
              name="ssda"
              lazy
            >
              <el-table
                ref="multipleTableRef"
                :data="ssdaList"
                height="100%"
                highlight-current-row
                row-key="jysjbh"
                @expand-change="expandChange"
                :expand-row-keys="expandRowKeys"
                @selection-change="handleSelectionChange"
              >
                <el-table-column type="expand">
                  <template #default="props">
                    <el-tree
                      style="margin-left: 45px"
                      ref="dalyTreeRef"
                      :data="props.row.treeData"
                      :check-strictly="false"
                      :props="{ label: 'mc', children: 'children' }"
                      node-key="jysjbh"
                      :show-checkbox="false"
                      highlight-current
                      @check="(_:any, checks: any)=>checkTree(checks, props.row)"
                    >
                      <template #default="{ data }">
                        <span class="custom-tree-node">
                          <span>{{ data.mc }} ({{ data.sl || data.wjsl }})</span>
                        </span>
                      </template>
                    </el-tree>
                  </template>
                </el-table-column>
                <el-table-column prop="dh" label="档号" show-overflow-tooltip />
                <el-table-column prop="ajmc" label="案件名称" show-overflow-tooltip />
                <el-table-column prop="bmsah" label="部门受案号" show-overflow-tooltip />
                <el-table-column prop="dsr" label="当事人" />
                <el-table-column prop="ay" label="案由" />
                <el-table-column prop="jcg" label="检察官" />
              </el-table>
            </el-tab-pane>
            <el-tab-pane
              label="&nbsp;&nbsp;&nbsp;&nbsp;视频档案&nbsp;&nbsp;&nbsp;&nbsp;"
              name="spda"
              lazy
            >
              <el-table
                ref="multipleTableRef"
                :data="spdaList"
                highlight-current-row
                row-key="dabh"
                height="100%"
                @selection-change="spHandleSelectionChange"
              >
                <!-- <el-table-column type="selection" width="55" /> -->
                <el-table-column prop="dh" label="档号" />
                <el-table-column prop="tm" label="题名" />
                <el-table-column prop="splx" label="视频类型" />
                <el-table-column prop="lzz" label="录制者" />
                <el-table-column prop="lzrq" label="录制日期" />
              </el-table>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button
          v-if="titleText === 'edit'"
          type="primary"
          @click="submit(formRef)"
          :loading="isLoading"
          >确定</el-button
        >
        <el-button v-else type="primary" @click="xjSubmit(formRef)" :loading="isLoading"
          >提交</el-button
        >
        <el-button @click="dialogVisible = false">取消</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<style lang="scss" scoped>
.dialog-box {
  width: 100%;
  display: flex;
  flex-direction: column;
  .el-form {
    flex: 1;
  }
}

.dialog-height {
  height: 70vh;
}
.delete-button {
  padding-bottom: 10px;
}

.right-bottom {
  height: 50%;
  border-top: 1px solid #dae4f1;
  position: relative;
  overflow-y: auto;
  padding-top: 10px;
  &.small {
    height: 10px !important;
    border: none !important;
  }
  .right-img {
    z-index: 9;
    cursor: pointer;
    position: absolute;
    left: calc(50% - 4px);
    top: -24px;
    transform: rotate(-90deg);
  }
}

.search-drag-box {
  margin: 0 1px;
  flex-shrink: 0;
  width: 10px;
  height: 100%;
  cursor: col-resize;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;

  .dragImg {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
  }
}
.table-drag-box {
  margin: 1px 0;
  flex-shrink: 0;
  height: 10px;
  width: 100%;
  cursor: row-resize;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;

  .dragImg {
    height: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    .dargIcon {
      font-size: 29px;
    }
  }
}

.td-tabs {
  height: auto;
  border: 0;
  :deep(.el-tabs__content) {
    // height: 200px;
    padding: 10px 0;
  }
  :deep(.el-tabs__item) {
    // height: 36px;
    padding: 0;
    &:hover,
    &.is-active {
      background-color: transparent;
    }
  }
}

:deep(.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content) {
  border-right: none !important;
  color: #0090ff;
  background-color: #d9edff;
}
</style>
